<template>
  <div class="uploader-div">
    <van-uploader :after-read = "afterRead"
                  accept="image/*" max-count="1" class="div-align-justify-center">
      <div v-if="avatar"  class="div-align-justify-center uploader-one-img-round">
        <img class="uploader-icon-round" :src="avatar" alt=""/>
      </div>
      <div v-else class="uploader-icon div-align-justify-center uploader-one-img-round">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M16 12.5374C17.4 12.5374 18.72 13.0835 19.7067 14.069C20.6933 15.0679 21.24 16.3865 21.24 17.7716C21.2267 19.2233 20.64 20.5285 19.6933 21.4742C18.7467 22.4198 17.44 23.0058 16 23.0058C14.6 23.0058 13.2933 22.4597 12.2933 21.4742C11.3067 20.4753 10.76 19.17 10.76 17.7716C10.7467 16.3865 11.2933 15.0813 12.28 14.0824C13.28 13.0835 14.6 12.5374 16 12.5374ZM16 14.5352C15.1333 14.5352 14.32 14.8682 13.6933 15.4941C13.08 16.1068 12.7467 16.9192 12.76 17.7583V17.7716C12.76 18.6373 13.0933 19.4497 13.7067 20.0624C14.32 20.675 15.1333 21.008 16 21.008C17.7867 21.008 19.2267 19.5563 19.24 17.7716C19.24 16.9059 18.9067 16.0935 18.2933 15.4808C17.68 14.8682 16.8667 14.5352 16 14.5352ZM23.48 12.2178C24.1467 12.2178 24.6933 12.7638 24.6933 13.4298C24.6933 14.0957 24.1467 14.6284 23.48 14.6284C22.8133 14.6284 22.28 14.0957 22.28 13.4298C22.28 12.7638 22.8133 12.2178 23.48 12.2178Z" fill="#FBCA04"/>
          <path opacity="0.2" d="M23.2534 8.31521L23.1201 8.0222C22.7601 7.26304 22.3467 6.38402 22.0934 5.87791C21.4801 4.67925 20.4267 4.01332 19.1334 4H12.8534C11.5601 4.01332 10.5201 4.67925 9.90675 5.87791C9.64008 6.41066 9.18675 7.36959 8.81342 8.15538L8.73342 8.31521C8.69342 8.42175 8.58675 8.47503 8.48008 8.47503C5.26675 8.47503 2.66675 11.0855 2.66675 14.2819V22.1931C2.66675 25.3896 5.26675 28 8.48008 28H23.5201C26.7201 28 29.3334 25.3896 29.3334 22.1931V14.2819C29.3334 11.0855 26.7201 8.47503 23.5201 8.47503C23.4001 8.47503 23.3067 8.40844 23.2534 8.31521Z" fill="#FBCA04"/>
        </svg>
      </div>
    </van-uploader>
  </div>
</template>
<script>
import {Uploader, Toast} from 'vant'
import { uploadImage } from '@/request/api'
export default {
  name: "FieldAvatar",
  props: {
    avatar: { type: String, default: () => ('') },
  },
  components: {
    [Uploader.name]: Uploader,
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    async afterRead(file) {
      if(file instanceof Array){
        file.forEach(element => {
          this.uploadImage(element)
        });
      }else{
        this.uploadImage(file)
      }
    },
    uploadImage(file) {
      let formData = new FormData();
      formData.append('image', file.file);
      uploadImage(formData).then(res => {
        const { State, Msg, Data } = res
        if (State) {
          const { url } = Data
          this.avatar = url
        } else {
          Toast(Msg)
        }
      })
    },
    getAvatar() {
      return this.avatar
    }
  },
};
</script>

<style scoped>
.uploader-div{
  width: 72px;
  height: 72px;
}
.uploader-icon{
  width: 72px;
  height: 72px;
  border: 1px dashed #C9A203;
  box-sizing: border-box;
  border-radius: 4px;
  margin-left: 12px;
}
.uploader-icon-round {
  width: 72px;
  height: 72px;
  box-sizing: border-box;
  border-radius: 44px;
}
.uploader-one-img-round {
  width: 72px;
  height: 72px;
  border-radius: 44px;
}
</style>